$(document).ready(function(){
    dotsFun();
    yiliaojituanmenzhenfeiyongfenxiFun();
    tabBgZuotuyiFun();//左表一切换
    yiliaojitianyaoTubiaoYaozhanbiFun();//左表一初始化
    tabBgZuoterFun();//左表一切换
    yiliaofuwushouruzhanbiFun();//左表二初始化
    kangshengsuyaopingshiyongliangpaihangFun();//左表三初始化
    gonggongweishengxitongFun();//右表一初始化
    jiuzhenhuanzhenFun();//右表二初始化
    goxianrenmingyiyuanFun();// 广灵人民医院
  });
// 中间地图点击进入乡的页面
 function dotsFun(){

    // 梁庄乡卫生院 
     $('#liangzuoxiang').click(function(){

         alert( $(this).children().val());
        
     })
     $('#liangzuoxiangDots').click(function(){

        alert( $(this).find('p').text());
     
     })
     // 望狐乡卫生院
     $('#wanghuxiang').click(function(){
        alert( $(this).children().val());
       
      })
      $('#wanghuxiangDots').click(function(){
        alert( $(this).find('p').text());
       
      })
      // 南村镇卫生院
      $('#nancunzhen').click(function(){
        alert( $(this).children().val());
       
      })
      $('#nancunzhenDots').click(function(){
        alert( $(this).find('p').text());
       
      })
      // 宜兴乡卫生院
      $('#yixinxiang').click(function(){
        alert( $(this).children().val());
       
      })
      $('#yixinxiangDots').click(function(){
        alert( $(this).find('p').text());
       
      })
      // 加斗乡卫生院
      $('#jiadouxiang').click(function(){
        alert( $(this).children().val());
       
      })
      $('#jiadouxiangDots').click(function(){
        alert( $(this).find('p').text());
       
      })
      // 焦山乡卫生院
      $('#jiaoshanxiang').click(function(){
        alert( $(this).children().val());
       
      })
      $('#jiaoshanxiangDots').click(function(){
        alert( $(this).find('p').text());
       
      })
      // 一斗泉乡卫生院
      $('#yidouquanxiang').click(function(){
        alert( $(this).children().val());
       
      })
      $('#yidouquanxiangDots').click(function(){
        alert( $(this).find('p').text());
       
      })
      // 作疃乡卫生院
      $('#zuotuanxiang').click(function(){
        alert( $(this).children().val());
       
      })
      $('#zuotuanxiangDots').click(function(){
        alert( $(this).find('p').text());
       
      })
      // 壶泉镇卫生院
      $('#huquanxiang').click(function(){
        alert( $(this).children().val());
       
      })
      $('#huquanxiangDots').click(function(){
        alert( $(this).find('p').text());
       
      })

    
 }
//  广灵县人民医院页面
function goxianrenmingyiyuanFun(){
  $('#weishengyuanxianyiyuanIconId').click(function(){
    event.stopPropagation();    //  阻止事件冒泡
    var guanglingrenmingyiyuan = "guanglingrenmingyiyuan";
    goXXpageFunA(guanglingrenmingyiyuan);
  })

}
//  中间下医疗集团门诊费用分析
function yiliaojituanmenzhenfeiyongfenxiFun(){

  var myChart = echarts.init(document.getElementById("yiliaojituanmenzhenrizhipaihangContentId"));
  var option = {
      // color: "#fff",
      legend: {
       
        top: "0",
        data: [
          {
            name: "门诊费用",
            // 强制设置图形为圆。
            icon: "circle",
            // 设置文本为红色
            textStyle: {
              color: "#fff",
            },
          },
          {
            name: "药品费用",
            // 强制设置图形为圆。
            icon: "circle",
            // 设置文本为红色
            textStyle: {
              color: "#fff",
            },
          },
          {
            name: "人均费用",
            // 强制设置图形为圆。
            icon: "circle",
            // 设置文本为红色
            textStyle: {
              color: "#fff",
            },
          },
        ],
      },
      grid: {
        left: "5",
        right: "0",
        bottom: "20",
        top: "25",
        show: true,
        containLabel: true,
        width: "98%",
        height: "85%",
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: ["县医院", "壶泉镇", "作疃乡", "一斗泉乡", "焦山乡", "加斗乡", "宜兴乡", "南村镇", "望狐乡", "梁庄乡"],
          axisLabel: {
            textStyle: {
              color: "#0cf0ff",
              fontSize: "12",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#0cf0ff",
            },
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          max: 10000,
          min: 0,
          splitNumber: 5,
          boundaryGap: [0.1, 0.1],
          axisLabel: {
            textStyle: {
              color: "#0cf0ff",
              fontSize: "12",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#0cf0ff",
            },
          },
        },
      ],
      axisLabel: {
        color: "#fff",
      },
      dataZoom: [

          {
              type: 'inside',
              yAxisIndex: [0],
              start: 0,
              end: 1000,
              throttle:100,
              // zoomOnMouseWheel:true, 
          }
      ],
      animation:true,
      animationDurationUpdate: function (idx) {
        // 越往后的数据时长越大
          return idx * 100;
      },
      series: [
        {
          name: "门诊费用",
          type: "line",
          smooth: true,
          // stack: "总量",
          areaStyle: {
            color: "rgba(60,179,113,0.2)",
          },
          symbol: "circle",
          symbolSize: 7,
          showSymbol: true,
          itemStyle: {
            color: "#3CB371",
            // border: "rabg(23,92,108,0.5)",
            borderWidth: 10,
          },
          data: [
            50,500,50,50,50,50,50,50,50,50
          ],
        },

        {
          name: "药品费用",
          type: "line",
          // stack: "总量",
          smooth: true,

          areaStyle: {
            color: "rgba(250,128,114,0.2)",
          },
          symbol: "circle",
          symbolSize: 7,
          showSymbol: true,
          itemStyle: {
            color: "#FA8072",
            // border: "rabg(23,92,108,0.5)",
            borderWidth: 10,
          },
          data: [
            50,500,50,50,50,50,50,50,50,50
            
          ],
        },
        
        {
          name: "人均费用",
          type: "line",
          // stack: "总量",
          smooth: true,

          areaStyle: {
            color: "rgba(250,128,114,0.2)",
          },
          symbol: "circle",
          symbolSize: 7,
          showSymbol: true,
          itemStyle: {
            color: "#3C72C4",
            // border: "rabg(23,92,108,0.5)",
            borderWidth: 10,
          },
          data: [
            50,500,50,50,50,50,50,50,50,50
            
          ],
        },
      ],
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
}

//  左图一切换
function tabBgZuotuyiFun(){
  // 标签变样式,变相应的容器
  $('#secLiZByi').click(function(){  //百元耗占比
      $(this).children().eq(0).css('color','#06E6F5');
      $(this).children().eq(1).css('height','0.01rem');
      $('#firLiZByi').children().eq(0).css('color','#fff');
      $('#firLiZByi').children().eq(1).css('height','0');
      $('#yiliaojituanTubiaohaozhanbi').show();
      $('#yiliaojituanTubiaoYaozhanbi').hide();
      // 百元耗占比图标
      // ajax
      yiliaojitianyaoTubiaoHaozhanbiFun();

  })
  // 
  $('#firLiZByi').click(function(){  //药占比
    $(this).children().eq(0).css('color','#06E6F5');
    $(this).children().eq(1).css('height','0.01rem');
    $('#secLiZByi').children().eq(0).css('color','#fff');
    $('#secLiZByi').children().eq(1).css('height','0');
    $('#yiliaojituanTubiaoYaozhanbi').show();
    $('#yiliaojituanTubiaohaozhanbi').hide();
    // 药占比图标
    // ajax
    yiliaojitianyaoTubiaoYaozhanbiFun();
  })

}

 
//  左图一药占比
function yiliaojitianyaoTubiaoYaozhanbiFun(){
  // alert('药占比');

   var myChart = echarts.init(document.getElementById("yiliaojituanTubiaoYaozhanbi"));
   
    var option = {
        legend: [
            {
              orient: 'vertical',
              left:'20',
              bottom: '5',
              data: ['县门诊药品占比', '县住院药品占比'],
              textStyle:{
                color:'#fff',
              }
          },{
              orient: 'vertical',
              bottom: '5',
              right:'60',
              data: ['乡门诊药品占比', '乡住院药品占比'],
              textStyle:{
                color:'#fff',
              }
          }

        ],
        series: [{
           
            type: 'pie',
            radius: '30%',
            width:'300',
            height:'300',
            top:'-80',
            left:'-70',
            right:'60%',
            cursor :'pointer',
            label: {
              normal: {
                  show: true,
                  position: 'outside' ,     // outside表示文本显示位置为外部
                  formatter: '{c}({d}%)',
                  align:'center'
              }
          },
          data: [
              {value: 100, name: '县门诊药品占比',itemStyle: { color: '#F7D36A' }},
              {value: 310, name: '县住院药品占比',itemStyle: { color: '#ACEEFC' }},
          ],
        }, {
            name: '药占比',
            type: 'pie',
            radius: '30%',
            width:'300',
            height:'300',
            top:'-80',
            left:'35%',
            right:'0',
            cursor :'pointer',
            label: {
              normal: {
                  show: true,
                  position: 'outside' ,     // outside表示文本显示位置为外部
                  formatter: '{c}({d}%)',
                  align:'center'
              }
          },
          data: [
              {value: 100, name: '乡门诊药品占比',itemStyle: { color: '#F18741' }},
              {value: 310, name: '乡住院药品占比',itemStyle: { color: '#4EA8E4' }},
          ],
        }]
    };

    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
}
//  左图一百元耗占比
function yiliaojitianyaoTubiaoHaozhanbiFun(){

   var myChart = echarts.init(document.getElementById("yiliaojituanTubiaohaozhanbi"));
   var option = {
    legend: [
        {
          orient: 'vertical',
          left:'20',
          bottom: '5',
          data: ['县门诊百元耗占比', '县住院百元耗占比'],
          textStyle:{
            color:'#fff',
          }
      },{
          orient: 'vertical',
          bottom: '5',
          right:'60',
          data: ['乡门诊百元耗占比', '乡住院百元耗占比'],
          textStyle:{
            color:'#fff',
          }
      }

    ],
    series: [{
       
        type: 'pie',
        radius: '30%',
        width:'300',
        height:'300',
        top:'-80',
        left:'-70',
        right:'60%',
        cursor :'pointer',
        label: {
          normal: {
              show: true,
              position: 'outside' ,     // outside表示文本显示位置为外部
              formatter: '{c}({d}%)',
              align:'center'
          }
      },
      data: [
          {value: 100, name: '县门诊百元耗占比',itemStyle: { color: '#F7D36A' }},
          {value: 310, name: '县住院百元耗占比',itemStyle: { color: '#ACEEFC' }},
      ],
    }, {
        name: '药占比',
        type: 'pie',
        radius: '30%',
        width:'300',
        height:'300',
        top:'-80',
        left:'35%',
        right:'0',
        cursor :'pointer',
        label: {
          normal: {
              show: true,
              position: 'outside' ,     // outside表示文本显示位置为外部
              formatter: '{c}({d}%)',
              align:'center'
          }
      },
      data: [
          {value: 100, name: '乡门诊百元耗占比',itemStyle: { color: '#F18741' }},
          {value: 310, name: '乡住院百元耗占比',itemStyle: { color: '#4EA8E4' }},
      ],
    }]
};
   myChart.setOption(option);
   window.addEventListener("resize", function () {
     myChart.resize();
   });
}

// 左表二切换
function tabBgZuoterFun(){

  $('#secLiZBer').click(function(){
    $(this).children().eq(0).css('color','#06E6F5');
    $(this).children().eq(1).css('height','0.01rem');
    $('#firLiZBer').children().eq(0).css('color','#fff');
    $('#firLiZBer').children().eq(1).css('height','0');
    $('#yiliaofuwuTubiaonianduzengzhangliang').show();
    $('#yiliaofuwuTubiaozhanbi').hide();
    yiliaozongshouruniaoduzengzhangliangFun();
  })

  $('#firLiZBer').click(function(){
    $(this).children().eq(0).css('color','#06E6F5');
    $(this).children().eq(1).css('height','0.01rem');
    $('#secLiZBer').children().eq(0).css('color','#fff');
    $('#secLiZBer').children().eq(1).css('height','0');
    $('#yiliaofuwuTubiaozhanbi').show();
    $('#yiliaofuwuTubiaonianduzengzhangliang').hide();
    yiliaofuwushouruzhanbiFun();
  })
}

// 左表二之医疗服务收入占比
function yiliaofuwushouruzhanbiFun(){
  var myChart = echarts.init(document.getElementById("yiliaofuwuTubiaozhanbi"));
   option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'horizontal',
            bottom: '5',
            data: ['县医疗服务收入占比', '乡医疗服务收入占比'],
            textStyle:{
              color:'#fff',
            }
        },
        series: [
            {
                name: '收入占比',
                type: 'pie',
                radius: '55%',
                width:'700',
                height:'240',
                top:'-40',
                left:'-150',
                cursor :'pointer',
                label: {
                  normal: {
                      show: true,
                      position: 'outside' ,     // outside表示文本显示位置为外部
                      formatter: '{c}({d}%)',
                      align:'center'
                  }
              },
                

                data: [
                    {value: 100, name: '县医疗服务收入占比',itemStyle: { color: '#ACEEFC' }},
                    {value: 310, name: '乡医疗服务收入占比',itemStyle: { color: '#CFF881' }},
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
}

// 左表二之医疗总收入年度增长量
function yiliaozongshouruniaoduzengzhangliangFun(){
  var myChart = echarts.init(document.getElementById("yiliaofuwuTubiaonianduzengzhangliang"));
   option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'horizontal',
            bottom: '5',
            data: ['县医疗总收入年度增长量', '乡医疗总收入年度增长量'],
            textStyle:{
              color:'#fff',
            }
        },
        series: [
            {
                name: '增长量',
                type: 'pie',
                radius: '55%',
                width:'700',
                height:'240',
                top:'-40',
                left:'-150',
                cursor :'pointer',
                label: {
                  normal: {
                      show: true,
                      position: 'outside' ,     // outside表示文本显示位置为外部
                      formatter: '{c}({d}%)',
                      align:'center'
                  }
              },
                

                data: [
                    {value: 100, name: '县医疗总收入年度增长量',itemStyle: { color: '#CFF881' }},
                    {value: 310, name: '乡医疗总收入年度增长量',itemStyle: { color: '#ACEEFC' }},
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
}

// 左表三之抗生素药品使用量排行
function kangshengsuyaopingshiyongliangpaihangFun(){
  var myChart = echarts.init(document.getElementById("kangshengsushiyongpaihangContentId"));
  var myColor = [
    "#1089E7",
    "#F57474",
    "#56D0E3",
    "#F8B448",
    "#8B78F6",
    "#1089E7",
    "#F57474",
    "#56D0E3",
    "#F8B448",
    "#8B78F6",

    "#1089E7",
    "#F57474",
    "#56D0E3",

    "#F8B448",
    "#8B78F6",
    "#1089E7",
  ];
  option = {
       
    grid: {
      left: "10%",
      right: "10%",
      bottom: "10%",
      top: "10%",
      containLabel: false,
    },
    animation:true,
    animationDurationUpdate: function (idx) {
      // 越往后的数据时长越大
        return idx * 100;
    },
    // 不显示x轴信息
    xAxis: {
      show: false,
    },
    // 不显示y轴线和相关刻度
    yAxis: [
      {
        type: "category",
        inverse: true,
        data: [
          'aa','bb','cc','dd','ee','ff','hh','jj','kk','ll','mm','nn','oo','ii','pp','qq'
          // xinzangbingText,
        ],
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#0cf0ff",
          fontSize: 10,
        },
      },
      {
        type: "category",
        inverse: true,
        data: [
         100,100,100,100,100,100,100,100,100,200,200,200,500,200,200,500
          // xinzangbingVal,
        ],
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#0cf0ff",
          fontSize: 10,
        },
      },
    ],
    dataZoom: [
      
      {
          type: 'inside',
          yAxisIndex: [0],
          start: 0,
          end: 1000,
          throttle:100,
          // zoomOnMouseWheel:true,
      }
    ],
    series: [
      {
        name: "条",
        type: "bar",
        barCategoryGap: 20,
        barWidth: 7,
        yAxisIndex: 0,
        itemStyle: {
          barBorderRadius: 20,
          color: function (params) {
            // console.log(params);
            return myColor[params.dataIndex];
          },
        },
        data: [
          100,100,100,100,100,100,100,100,100,200,200,200,500,200,200,500
        ],
      },
      {
        name: "框",
        type: "bar",
        barCategoryGap: 20,
        barWidth: 12,
        yAxisIndex: 1,
        itemStyle: {
          color: "none",
          borderColor: "#00c1de",
          borderWidth: 3,
          barBorderRadius: 15,
        },
        data: [
          1000,
          1000,
          1000,
          1000,
          1000,
          1000,
          1000,
          1000,
          1000,
          1000,
          1000,
          1000,
          1000,
          1000,
          1000,
          1000,
          // 10000,
        ],
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}

// 右表一之公共卫生系统
function gonggongweishengxitongFun(){
  var myChart = echarts.init(document.getElementById("gonggongweishengContentBg"));
  var option = {
      tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
          orient: 'horizontal',
          bottom: '13',
          data: ['梁庄乡', '望狐乡', '南村镇', '宜兴乡', '加斗乡', '焦山乡', '一斗泉乡', '作疃乡', '壶泉镇'],
          textStyle:{
            color:'#fff',
          }
      },
      series: [
          {
              name: '',
              type: 'pie',
              radius: '55%',
              width:'500',
              height:'240',
              top:'-20',
              left:'-50',
              cursor :'pointer',
              label: {
                normal: {
                    show: true,
                    position: 'outside' ,     // outside表示文本显示位置为外部
                    formatter: '{c}({d}%)',
                    align:'center'
                }
            },
              

              data: [
                  {value: 100, name: '梁庄乡',itemStyle: { color: '#FFA378' }},
                  {value: 310, name: '望狐乡',itemStyle: { color: '#CFF881' }},
                  {value: 310, name: '南村镇',itemStyle: { color: '#9BE5A0' }},
                  {value: 310, name: '宜兴乡',itemStyle: { color: '#9BE9FC' }},
                  {value: 310, name: '加斗乡',itemStyle: { color: '#FDC0EB' }},
                  {value: 310, name: '焦山乡',itemStyle: { color: '#A18BD3' }},
                  {value: 310, name: '一斗泉乡',itemStyle: { color: '#F7D36A' }},
                  {value: 310, name: '作疃乡',itemStyle: { color: '#5EA287' }},
                  {value: 310, name: '壶泉镇',itemStyle: { color: '#3C72C4' }},

              ],
              emphasis: {
                  itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
              }
          }
      ]
  };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
}

// 右表二之就诊患者排行
function jiuzhenhuanzhenFun(){
  var myChart = echarts.init(document.getElementById("jiuzhenhuanzhepaihangtongjiContentBg"));
  var myColor = [
    "#1089E7",
    "#F57474",
    "#56D0E3",
    "#F8B448",
    "#8B78F6",
    "#1089E7",
    "#F57474",
    "#56D0E3",
    "#F8B448",
    "#8B78F6",
  ];
  option = {
       
    grid: {
      left: "10%",
      right: "15%",
      bottom: "10%",
      top: "10%",
      containLabel: false,
    },
    // 不显示x轴信息
    xAxis: {
      show: false,
    },
    // 不显示y轴线和相关刻度
    yAxis: [
      {
        type: "category",
        inverse: true,
        data: [
          'aa','bb','cc','dd','ee','ff','hh','jj','kk'
          // xinzangbingText,
        ],
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#0cf0ff",
          fontSize: 10,
        },
      },
      {
        type: "category",
        inverse: true,
        data: [
         100,100,100,100,100,100,100,100,100
          // xinzangbingVal,
        ],
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#0cf0ff",
          fontSize: 10,
        },
      },
    ],

    dataZoom: [
      // 滚动条形式去查看过多的数据，下面是以滚动滑轮查看
     
      
      {
        type: 'inside',
        yAxisIndex: [0],
        start: 0,
        end: 1000,
        throttle:100,
      }
    ],
    animation:true,
    animationDurationUpdate: function (idx) {
      // 越往后的数据时长越大
        return idx * 100;
    },
    series: [
      {
        name: "条",
        type: "bar",
        barCategoryGap: 20,
        barWidth: 7,
        yAxisIndex: 0,
        itemStyle: {
          barBorderRadius: 20,
          color: function (params) {
            // console.log(params);
            return myColor[params.dataIndex];
          },
        },
        data: [
          100,100,100,100,100,100,100,100,100
        ],
      },
      {
        name: "框",
        type: "bar",
        barCategoryGap: 20,
        barWidth: 12,
        yAxisIndex: 1,
        itemStyle: {
          color: "none",
          borderColor: "#00c1de",
          borderWidth: 3,
          barBorderRadius: 15,
        },
        data: [
          1000,
          1000,
          1000,
          1000,
          1000,
          1000,
          1000,
          1000,
          1000,
          // 10000,
        ],
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
// 右表三之分级诊疗
function fenjizhenliaoFun(){

} 

 
 

